import React, { Component } from 'react'
import { Text, StyleSheet, View, Dimensions, ScrollView, Image, TouchableHighlight } from 'react-native'
import Ionicons from 'react-native-vector-icons/Ionicons'
import Swiper from 'react-native-swiper'
import Geolocation from '@react-native-community/geolocation';
import Storage from '../utils/storage'




export default class Home extends Component {
  constructor(props) {
    super(props)
    console.log('Welcome Home')
    Storage.set('appname', 'rntutorial111')
    Storage.set('testUser', {username: 'Tom', age: 20})
  }

  componentDidMount() {
    console.log('geolocation')
    Storage.get('appname').then(value => {
      console.log(value)
    })
    
    Storage.get('testUser').then(value => {
      console.log(value)
    })
    
    // Geolocation.getCurrentPosition(info => console.log(info));
  }
  

  render() {
    const sw = Dimensions.get('window').width
    return (
      <View>
        <ScrollView>
          {/* 九宫格 */}
          <View style={[styles.container]}>
            <TouchableHighlight
              onPress={() => {
                // alert(item.key)
                this.props.navigation.navigate('ScanDemo')
              }}
            >
              <View style={[styles.itemBase]}>
                <Ionicons name="scan-outline" size={40} color={'white'} ></Ionicons>
                <Text style={[styles.fontBase]}>扫一扫</Text>
              </View>
            </TouchableHighlight>
            <View style={[styles.itemBase]}>
              <Ionicons name="qr-code-outline" size={40} color={'white'} ></Ionicons>
              <Text style={[styles.fontBase]}>付款码</Text>
            </View>
            <View style={[styles.itemBase]}>
              <Ionicons name="trail-sign-outline" size={40} color={'white'} ></Ionicons>
              <Text style={[styles.fontBase]}>出行</Text>
            </View>
            <View style={[styles.itemBase]}>
              <Ionicons name="card-outline" size={40} color={'white'} ></Ionicons>
              <Text style={[styles.fontBase]}>卡包</Text>
            </View>
          </View>

          {/* 轮播图 */}
          <Swiper style={styles.wrapper} showsButtons={true}>
            <View style={styles.slide}>
              <Image
                source={require('../images/1.jpg')}
                style={[styles.slideImage]}
              />
            </View>
            <View style={styles.slide}>
              <Image
                source={require('../images/2.jpg')}
                style={[styles.slideImage]}
              />
            </View>
            <View style={styles.slide}>
              <Image
                source={require('../images/3.jpg')}
                style={[styles.slideImage]}
              />
            </View>
          </Swiper>

          
        </ScrollView>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  itemBase: {
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#00b38a',
    width: Dimensions.get('window').width/4,
    height: 90,
    marginTop: -10
  },
  fontBase: {
    color: '#fff',
    fontSize: 14,
  },
  wrapper: {
    height: 180
  },
  slide: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  slideImage: {
    width: Dimensions.get('window').width, 
    height: 180
  }
})
